﻿@page "/range-slider/ticks"

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons
@using SFInputs = Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns
@inherits SampleBaseComponent;
@using Syncfusion

<SampleDescription>
    <p>This sample demonstrates the rendering of Slider component with Ticks placement. Drag the thumb over the bar for
        selecting the values between Min and Max.</p>
</SampleDescription>
<ActionDescription>
    <p>The ticks are the visual representation of the Slider values. The ticks are differentiated as small and large
        ticks based on its size. The ticks position can be defined by the <code>SmallStep</code> and
        <code>LargeStep</code> properties.</p>
    <p> In this demo, ticks position with default and Range Slider is demonstrated.</p>
    <ul>
        <li>Default Slider – In this sample, the small and large ticks are rendered with the frequency of 0.05 and 0.20.
        </li>
        <li>Range Slider – In this sample, the small and large ticks are rendered with the frequency of 5 and 20.</li>
    </ul>
    <p> The placement of the ticks and disabling of Slider component can also be changed from the property pane.</p>
    <p>The following properties are used to restrict the value range for the slider:</p>
    <ul>
        <li><code>Step</code> - defines incremental or decremental step value for slider.</li>
        <li><code>Min</code> – specifies minimum value of the slider.</li>
        <li><code>Max</code> – specifies maximum value of the slider.</li>
    </ul>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <div class="sliderwrap">
            <label class="userselect">Default Slider</label>
            <SfSlider Min="0.1" Max="0.9" Value=@DefaultValue Step="0.05">
                <SliderTicks Placement="Placement.Before" ShowSmallTicks="true" LargeStep="0.2" SmallStep="0.05">
                </SliderTicks>
            </SfSlider>
        </div>
        <div class="sliderwrap">
            <label class="userselect">Range Slider</label>
            <SfSlider Min="10" Max="90" Step="5" Type=SliderType.Range Value=@RangeValue>
                <SliderTicks Placement="Placement.Both" ShowSmallTicks="true" LargeStep="20" SmallStep="5">
                </SliderTicks>
            </SfSlider>
        </div>
    </div>
</div>

@code{
    public double DefaultValue = 0.3;
    public int[] RangeValue = { 30, 70 };
}
<style>
    .content-wrapper {
        width: 52%;
        margin: 0 auto;
        min-width: 185px;
    }
    .sliderwrap {
        margin-top: 45px;
    }
    .e-bigger .content-wrapper {
        width: 80%;
    }
    .sliderwrap label {
        padding-bottom: 50px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 15px;
    }
    .userselect {
        -webkit-user-select: none; /* Safari 3.1+ */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
    }
</style>
